<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>v-for</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
	</style>
</head>

<body>
	<div id='app'>
		<li v-for='food in foods'>商品名: {{food.name}} 重量: {{food.weight}}克 价格: {{food.price}}元</li>
	</div>
	<script src='../lib/vue.js'></script>
	<script src='./app.js'></script>
	<script>
		// v-for 是对 vue data 数据遍历的一个属性
		// 通常 vue data 为嵌套对象时, 会用到 v-for 遍历, 用法非常的简单
		// 上例中, vue data 中有数组 foods , 可以通过 food in foods 然后引用其中的 key , 获取对应的 value
	</script>
</body>

</html>